<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/css/blog.css"/>
    <title>blog</title>
    <style type="text/css">
        .banner {
            width: 100%;
            height: 400px;
            background: url(assets/img/r.jpg) no-repeat 100% 100%;
            background-size: 100% 100%;
        }

        .font {
            width: 90%;
            text-align: center;
            color: #fff;
            line-height: 60px;
            font-size: 20px;
            padding-top: 20px;
        }

        .font h1 {
            word-spacing: 20px;
            letter-spacing: 10px;
            font-size: 50px;
        }

        .fontP {
            text-align: center;
            color: #fff;
            line-height: 60px;
            font-size: 20px;
            padding-top: 20px;
        }

        .forms {
            width: 90%;
            margin: 0 auto;
        }

        .form {
            background-color: #D6CCC5;
            text-align: center;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 60px;
            width: 30%;
            padding: 0 20px;
            margin: 30px auto;
        }

        .form input {
            border-radius: 5px;
            display: block;
            height: 30px;
            width: 350px;
            border: none;
            padding-left: 10px;
            font-weight: bold;
        }

        .form button {
            width: 100px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background: url(assets/img/button.png) no-repeat 10px 6px;
            background-size: 15px 15px;
            background-color: #F19323;
            font-weight: bold;
        }

        /* banner完 */
        .rightBox1 {
            height: 160px;
            background: url(assets/img/banner4i.jpg) no-repeat;
            background-size: 100% 100%;
        }

        /* blog */
        @media screen and (max-width: 940px) {
            .form {
                flex-wrap: wrap;
                padding: 20px 20px;
                margin: 0px auto;
            }

            .fontP {
                font-size: 15px;
                padding-top: 0px;
            }

            /* blog */
            .rightBox1 {
                height: 260px;
                background: url(assets/img/banner4i.jpg) no-repeat;
                background-size: 100% 100%;
            }
        }

        @media screen and (max-width: 800px) {
            .form {
                width: 40%;
                padding: 20px 20px;
                margin: 0px auto;
            }

            .font {
                line-height: 50px;
                padding-top: 10px;
            }

            .fontP {
                font-size: 15px;
                padding-top: 0px;
            }
        }

        @media screen and (max-width: 650px) {
            .form {
                width: 40%;
                padding: 20px 40px;
                margin: 5px auto;
            }

            .font {
                line-height: 40px;
                padding-top: 10px;
            }

            .font h1 {
                word-spacing: 10px;
                letter-spacing: 10px;
                font-size: 40px;
            }

            .fontP {
                font-size: 15px;
                padding-top: 0px;
            }
        }
    </style>
</head>
<body>
<div id="bigBox">
    <header>
        <div class="header center">
            <div class="one">
                <img src="assets/img/img1.png">
                <img src="assets/img/img1.png">
                <img src="assets/img/img1.png">
                <img src="assets/img/img1.png">
                <img src="assets/img/img1.png">
            </div>
            <div class="two">
                <div class="two1"><img src="assets/img/xin.png"><span>ContacUst@Gmail.com</span></div>
                <div class="two2"><img src="assets/img/phone.png"><span>80888887</span></div>
            </div>
        </div>
    </header>
    <div class="navs">
        <div class="center">
            <img src="assets/img/logo2.png">
            <nav>
                <div class="nav">
                    <ul>
                        <li><a th:href="index">HOMRE</a></li>
                        <li><a th:href="blog" class="current">BLOG</a></li>
                        <li><a th:href="about">ABOUT US</a></li>
                        <li><a th:href="contact">CONTACT</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div><!--navs-->
    <div class="banner">
        <div class="font">
            <h1>SEE THE WORD DIFFERENTLY</h1>
            <p>Request,design and book travel experiences as unique as you are</p>
        </div>
        <div class="forms">
            <div class="form">
                <input type="text" v-model="name" id="searchContent" placeholder="Where are you going?"/>
                <button onclick="searchClick()">Search</button>
            </div>
        </div>
        <div class="fontP"><p>TOP DESTINATION :PARISNEW YORKLONDONROMESAN FRANCISCOMORE...</p></div>
    </div><!--banner-->
    <div class="blogs">
        <div class="center1">
            <div class="ways">
                <div class="way" th:each="user:${modules[19].banners}" th:onclick="'detailFun(' + ${user.id} + ')'">
                    <img th:src="${user.imgUrl1}">
                    <h3 class="wayF2">[[${user.title}]]</h3>
                    <hr/>
                    <div class="wayB">
                        <p class="wayF">[[${user.description}]]</p>
                        <p class="wayF1">[[${user.content}]]<span>[[${user.content1}]]</span></p>
                    </div>
                </div>
            </div><!--ways-->
            <div class="rightBox">
                <div class="rightBox1">
                    <h4>ABOUT US</h4>
                </div>
                <div class="box1">
                    <div class="rightTitle1">
                        <h4 th:text="${modules[8].module.title}"></h4>
                    </div>
                    <p th:text="${modules[8].module.description}"></p>
                </div>
                <div class="box2">
                    <div class="rightTitle2">
                        <h4 th:text="${modules[9].module.title}"></h4>
                    </div>
                    <div class="boxs2" th:each="user1:${modules[9].banners}"
                         th:onclick="'detailFun(' + ${user1.id} + ')'">
                        <div class="boxs2Img"><img th:src="${user1.imgUrl1}"></div>
                        <div class="boxs2P"><p>[[${user1.title}]]</p></div>
                    </div>
                </div>
                <div class="box1">
                    <div class="rightTitle3">
                        <h4 th:text="${modules[10].module.title}"></h4>
                    </div>
                    <input type="text" v-model="Archives" placeholder="Seledt Month">
                </div>
                <div class="box3">
                    <div class="rightTitle4">
                        <h4 th:text="${modules[11].module.title}"></h4>
                    </div>
                    <div class="ul">
                        <ul>
                            <li th:each="user2:${modules[11].banners}"><img th:src="${user2.imgUrl1}"></li>
                        </ul>
                    </div>
                </div>
                <div class="box4">
                    <div class="rightTitle5">
                        <h4 th:text="${modules[12].module.title}"></h4>
                    </div>
                    <div class="ul1">
                        <ul th:each="user4:${modules[12].banners}">
                            <li>[[${user4.title}]]</li>
                        </ul>
                    </div>
                </div>
            </div><!--rightBox-->
            <!--分页-->
            <ul class="flex tab_Fas sad">
                <li class="all_page" style="width:100%;display: flex;justify-content: center;padding: 0"
                    data-max-page="2" data-now-page="1">
                </li>
            </ul>
        </div><!--blog-->
    </div><!--blogs-->
    <footer>
        <div class="footer">
            <div class="end center">
                <div class="footerL">
                    <img src="assets/img/logo2.png">
                    <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque quod maxime placeat cum soluta
                        nobis facere possimus nihil impedit quo minus id quod maxime placeat facere possimus. est
                        eligendi optio cumquefacere possimus nihil impedit quo minus id quod maxime placeat facere
                        possimus.</p>
                </div>
                <div class="footerC">
                    <div class="footerCTitle">
                        <h4>News Letter</h4>
                    </div>
                    <p>facere possimus nihil impedit quo minus id quod maxime placeat facere possimus. est eligendi</p>
                    <input type="text" v-model="email" placeholder="Enter your email address">
                    <button>SUBCRIBE NOW</button>
                </div>
                <div class="footerR">
                    <div class="footerRTitle">
                        <h4>Flickr Widget</h4>
                    </div>
                    <div class="footerRimg">
                        <img src="assets/img/footer.jpg">
                        <img src="assets/img/footer.jpg">
                        <img src="assets/img/footer.jpg">
                        <img src="assets/img/footer.jpg">
                    </div>
                </div>
            </div>
            <div class="endBottom">??2015 - Designed by ZEROTHEME</div>
        </div>
    </footer>
</div><!--bigBox-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">
    function searchClick() {

        window.location.href = "blog?searchKey=" + $("#searchContent").val();

    }

    function detailFun(id) {
        window.location.href = `cms_detail?id=${id}`;
    }
</script>

<script>
    $('.tab_Fas p:eq(0)').attr('data-type', 1)
    $('.tab_Fas p:eq(1)').attr('data-type', 2)

    let maxPage = $('li[data-max-page]').attr('data-max-page')
    for (let i = 0; i < maxPage; i++) {
        $(".all_page").append(
            `
                <span data-page="${i + 1}" onclick="pageFun(${i + 1})">${i + 1}</span>
            `
        )
    }

    $(function () {
        pageFun(1);
    })

    function pageFun(pageNum) {
        $.ajax({
            type: "get",
            url: '/cms_blog_page',
            data: {pageNum: pageNum, pageSize: 6},
            dataType: "json",
            success: function (data) {
                console.log(data);
                let res = data.rows;
                let html = "";
                if (res.length > 0) {
                    res.forEach(item => {
                        html += `
							<div class="way" onclick="detailFun(${item.id})">
                        <img src="${item.imgUrl1}">
                        <h3 class="wayF2">${item.title}</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">${item.description}</p>
                            <p class="wayF1">${item.content} <span>${item.content1}</span></p>
                        </div>
                    </div>
                    		 `
                    })
                } else {
                    // html = '<p style="text-align:center;width:100%;line-height:430px;min-height: 430px">—— 暂无数据 ——</p >';
                }

                //填充进去
                $('.ways').html(html);

                //通过total来填充页码
                if(data.total % 6 !=0){

                }

                let max_page = data.total % 6 ==0?data.total/6: data.total/6+1;
                $(".all_page").empty();
                for (let i = 0; i < max_page; i++) {
                    $(".all_page").append(
                        `
                <span data-page="${i + 1}" onclick="pageFun(${i + 1})">${i + 1}</span>
            `
                    )
                }

                //修改页码高亮
                // $('.all_page').attr('data-now-page',pageNum);

            }

        });
    }

</script>
</body>
</html>
